<template>
<a-breadcrumb style="font-size:18px;font-weight:bold;margin-bottom:20px;">
    <a-breadcrumb-item>安全管理</a-breadcrumb-item>
    <a-breadcrumb-item>用户管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-table
    :dataSource="page.list"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <template #u_sex="{ text }">
{{text === 1?'男':(text===2?'女':'未填')}}
    </template>
    <template #u_status="{text}">
       {{text === '00'?'已注册':(text === '55'?'启用中':'已禁用')}}
    </template>
    <template #action="{record}">
        <span>
            <a-button type="link">修改</a-button>
            <a-divider type="vertical" />
            <a-button type="link">删除</a-button>
            <a-divider type="vertical" />
            <a-button type="link" v-if="record.u_status==='00' || record.u_status==='77' ">启用</a-button>
            <a-button type="link" v-if="record.u_status==='55'">禁用</a-button>
            
        </span>
    </template>
  </a-table>
</template>
<script setup>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive ,computed } from "vue";

//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";

//引入函数，用于向服务端发送get请求
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";

//获取路由器对象
const router = useRouter();

const columns = [
  {
    title: "账号",
    dataIndex: "u_id",
    
  },
  {
    title: "姓名",
    dataIndex: "u_name",
  },
  {
    title: "性别",
    dataIndex: "u_sex",
    slots:{
        customRender:'u_sex'
    }
  },
  {
    title: "出生日期",
    dataIndex: "u_birth",
  },
  {
    title: "状态",
    dataIndex: "u_status",
    slots:{
        customRender:'u_status'
    }
  },
  {
    title: '操作',
    key: 'action',
    slots: {
      customRender: 'action',
    },
  },
];

//分页处理-start
const query = reactive({
  u_id:'',
});//定义查询参数

const page = ref({});//接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1,//当前页
  pageSize: 2,//每页记录数
  total: 0,//总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"],//每页记录下拉框的选型
  showSizeChanger: true,//是否展示每页记录数下拉框
  showQuickJumper: true,//是否展示快速跳转
  showTotal: (total, range) => {//展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get('/security/user', query).then(res => {
    page.value = res.data;//将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current=page.value.current
    pagination.pageSize=page.value.pageSize
    pagination.total=page.value.total
    
  });
};
getPage(1);//页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
    
	pagination.current=pagi.current
  pagination.pageSize=pagi.pageSize
  pagination.total=pagi.total

	getPage(pagination.current)
};


//分页处理-end




</script>
<style scoped>
</style>